<template>
    <div class="kk-doc-table">
        <div class="op-group">
            <template v-if="tableSelections.length == 0">
                <el-upload class="upload-demo" :action="action" :data="uploadAppendData" multiple
                    :show-file-list="false" :on-success="onUploadSuccess">
                    <el-button size="small" type="primary">上传</el-button>
                </el-upload>
            </template>
            <template v-else>
                <el-button type="primary" size="small" @click="handleBatchDelete">删除</el-button>
            </template>

        </div>
        <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column prop="name" label="文件名" min-width="280">
                <template #default="{ row }">
                    <i :class="row.icon" style="font-size: 16px;margin-right: 8px;" :style="{ color: row.color }"></i>
                    <span>{{ row.name }}</span>
                    <div class="table-row-opgroup">
                        <el-button size="small" text type="primary" @click="handleDownload(row)">下载</el-button>
                        <!-- <el-button size="small" text type="primary">预览</el-button> -->
                        <el-button size="small" text type="primary" @click="handleSingleDelete(row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="size" label="大小" width="180" />
            <el-table-column prop="extension" label="类型" width="180" />
            <el-table-column prop="createdBy" label="上传人" width="180" />
            <el-table-column prop="createdAt" label="上传时间" width="180" />
        </el-table>
    </div>

</template>
<script setup lang="js">
import { ref, onMounted, defineProps, watch } from 'vue';
import kbdocument from '@/api/kbdocument';
import dayjs from 'dayjs';
import { ElMessageBox } from 'element-plus';
import fileupload from '@/api/fileupload';
const props = defineProps({
    dirId: {
        type: Number,
        default: -1
    }
})
const action = ref('/api' + kbdocument.docUploadUrl)
const uploadAppendData = ref({
    dirId: 15
})
const tableData = ref([])

const getDocList = () => {
    kbdocument.getDocList(props.dirId).then(res => {
        tableData.value = res.data.map(item => {
            let icon_color = computeIconColor(item.extension);
            return {
                ...item,
                icon: icon_color.icon,
                color: icon_color.color,
                createdAt: dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
                size: computeSize(item.size) // 2位小数
            }
        })
    })
}

function computeSize(size) {
    if (size < 1024) {
        return size + 'B'
    } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + 'KB'
    } else if (size < 1024 * 1024 * 1024) {
        return (size / (1024 * 1024)).toFixed(2) + 'MB'
    }
}

function computeIconColor(ext) {
    switch (ext) {
        case 'pdf':
            return {
                color: 'red',
                icon: 'bi bi-file-earmark-pdf'
            }
            break;
        case 'doc':
            return {
                color: 'blue',
                icon: 'bi bi-file-earmark-word'
            }
            break;
        case 'xls':
            return {
                color: 'green',
                icon: 'bi bi-file-earmark-excel'
            }
            break;
        case 'ppt':
            return {
                color: 'orange',
                icon: 'bi bi-file-earmark-ppt'
            }
            break;
        case 'txt':
            return {
                color: 'black',
                icon: 'bi bi-file-earmark-text'
            }
            break;
        case 'zip':
            return {
                color: 'gray',
                icon: 'bi bi-file-earmark-zip'
            }
            break;
        case 'rar':
            return {
                color: 'gray',
                icon: 'bi bi-file-earmark-zip'
            }
            break;
        case 'jpg':
            return {
                color: 'orange',
                icon: 'bi bi-file-earmark-image'
            }
            break;
        case 'png':
            return {
                color: 'orange',
                icon: 'bi bi-file-earmark-image'
            }
            break;
        default:
            return {
                color: 'black',
                icon: 'bi bi-file-earmark'
            }
            break;
    }
}

const onUploadSuccess = (res, file, fileList) => {
    // console.log(res, file, fileList)
    getDocList()
}

// 表格处理相关- start
const handleSelectionChange = (vals) => {
    tableSelections.value = vals;
    console.log(vals)
}
const tableSelections = ref([])

const handleSingleDelete = (id) => {
    mulipleDeleteDocs([id])
}

const handleBatchDelete = () => {
    let ids = tableSelections.value.map(item => item.id)
    mulipleDeleteDocs(ids)
}

function mulipleDeleteDocs(ids) {
    ElMessageBox.confirm('确定要删除吗？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        kbdocument.deleteDocs(ids).then(res => {
            getDocList()
        })
    })
}

const handleDownload = (row) => {
    const documentId = row.documentId;
    window.open('/api' + fileupload.DOWNLOAD_URL + '?id=' + documentId)
}
// 表格处理相关- end

onMounted(() => {
    getDocList()
})

watch(() => props.dirId, (val) => {
    getDocList();
})

</script>
<style lang="scss" scoped>
.kk-doc-table {
    height: 100%;
    margin-left: 10px;


    :deep(.el-table) {
        .cell {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    }

    .el-table tr {
        .table-row-opgroup {
            display: none;
            position: absolute;
            right: 10px;
            align-items: center;
            bottom: 7px;
            padding-left: 5px;
            background: var(--el-table-row-hover-bg-color);
            height: 24px;

            .el-button {
                padding: 1px;
                margin: 0px 2px;
            }
        }

        &:hover {
            .table-row-opgroup {
                display: flex;
            }
        }
    }

}
</style>